<template>
	<view class="bg-grey container">
		<sb-back-icon />
		<sb-go2top />
		<u-sticky h5-nav-height='0'>
			<sb-search />
			<u-gap height="10" bg-color="#eee"></u-gap>
			<view class="tabs_wrap bg-white flex j-s t-c">
				<view class="j-a-c flex tab-item " :class="{active:item.name===qs.sortKey}"
					v-for="(item, i) in tabsList" :key="i" @click="tabsClick(item, i)">
					{{ item.name }}
					<view v-if="item.name === 'Price'" class="marh20 flex flex-col  ">
						<u-icon size="24" name="arrow-up-fill"
							:color="qs.sortKey==='Price' &&qs.sortType==='asc'?'#000':'#ccc'" />
						<u-icon size="24" name="arrow-down-fill"
							:color="qs.sortKey==='Price' &&qs.sortType==='desc'?'#000':'#ccc'" />
					</view>
				</view>
			</view>
		</u-sticky>
		<sb-loading-container ref='loadingRef'>
			<sb-empty v-if="!goodsList.length" />
			<view v-else class="padh20">
				<template v-for="(item, i) in goodsList">
					<navigator :key="i" :url="`./detail?id=${item.id}`" class="flex j-s bg-white oh radius20 marv20">
						<sb-img w="230" r='20' :src="item.cover" shadow />
						<view class="item-info flex1 padh20 padv10 flex flex-col j-s">
							<view class="u-line-2 bold c-0">
								{{item.name}}
								{{item.name}}
								{{item.name}}
								{{item.name}}
								{{item.name}}
								{{item.name}}
								{{item.name}}
								{{item.name}}
								{{item.name}}
							</view>
							<view>
								<view class="flex j-s marv10">
									<sb-price-text :price="item.salePrice" />
									<u-icon name="shopping-cart" size="35"></u-icon>
								</view>
								<view class="c-d font24">
									Sale Count：
									{{ item.virtualSaleCount }}
								</view>
							</view>
						</view>
					</navigator>
					<!-- <sb-line v-if='i<goodsList.length-1' /> -->
				</template>
			</view>
		</sb-loading-container>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				hotList: [],
				cata_id: 0,
				arrowRecord: 0,
				//tabs
				tabsList: [{
						name: "Recommend",
					},
					{
						name: "SaleCount",
					},
					{
						name: "Price",
					},
				],
				goodsList: [],
				keywords: "",
				qs: {
					pageIndex: 1,
					pageSize: 10,
					sortType: '',
					sortKey: "Recommend",
					keywords: undefined,
					categoryId: undefined
				},
			};
		},
		onLoad({ cata_id, keywords }) {
			if (cata_id) this.qs.categoryId = cata_id;
			if (keywords) this.keywords = this.qs.keywords = keywords;
		},
		onReady() {
			this.getGoodList();
		},
		watch: {
			current() {
				this.goodsList = [];
				this.arrowRecord = 0;
				this.getGoodList();
			},
		},
		onReachBottom() {
			this.qs.pageIndex++
			this.getGoodList()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
			this.qs.pageIndex = 1
			this.getGoodList();
		},
		methods: {
			selectToSearch(item) {
				this.keywords = item;
				this.qs.cata_id = "";
				this.qs.keywords = item;
				this.getGoodList();
			},
			tabsClick(item, index) {
				this.qs.sortKey = item.name
				if (item.name === 'Price') {
					if (!this.qs.sortType || this.qs.sortType === 'desc') {
						this.qs.sortType = 'asc'
					} else {
						this.qs.sortType = 'desc'
					}
				} else {
					this.qs.sortType = 'desc'
				}

				this.getGoodList();
			},
			async getGoodList() {
				try {
					this.$refs.loadingRef.show()
					let { success, data, } = await this.$get("/goods/client-list", this.qs, false);
					if (this.qs.pageIndex === 1) this.goodsList = []
					if (!success) return this.$msg("error")
					if (!data.rows.length) return this.$msg("no more")
					this.goodsList = this.goodsList.concat(data.rows)
				} finally {
					this.$refs.loadingRef.hide()
				}
			},

		},
	};
</script>

<style lang="scss" scoped>
	.container {
		/deep/ {
			.u-sticky {
				background-color: #fff;
			}
		}
	}

	.tab-item {
		border-bottom: 6rpx solid transparent;
		width: 33.3333%;
		height: 80rpx;
		color: #999;

		&.active {
			color: $main-color;
			font-weight: bold;
			font-size: 30rpx;
			border-bottom-color: $main-color;
		}
	}
</style>
